import { useRoutes, useLocation,useNavigate} from 'react-router-dom'
import { lazy, Suspense,useEffect } from 'react'
import { Loading } from 'react-vant';


const Home = lazy(() => import('../pages/Home'))
const Meaasge = lazy(() => import('../pages/Message'))
const Info = lazy(() => import('../pages/Info'))
const Recommand = lazy(() => import('../pages/Recommand'))
const User = lazy(() => import('../pages/User'))
const NewHouse = lazy(() => import('../pages/other/NewHouse'))
const OldHouse = lazy(() => import('../pages/other/OldHouse'))
const RentHouse = lazy(() => import('../pages/other/RentHouse'))
const CityPrice = lazy(() => import('../pages/other/CityPrice'))
const Map = lazy(() => import('../pages/other/Map'))
const Detail = lazy(() => import('../pages/other/HouseDetail'))
const AddHouse = lazy(() => import('../pages/other/AddMyHouse'))
const Search = lazy(() => import('../pages/other/Search'))
const Setting = lazy(() => import('../pages/User/components/Setting'))
const UserInfo = lazy(() => import('../pages/User/components/UserInfo'))
const Name = lazy(() => import('../pages/User/components/ChangeName'))
const Login = lazy(() => import('../pages/Login'))
const Rim = lazy(()=> import('../pages/Rim'))
const MeaasgeContent = lazy(()=> import('../pages/messageContent'))

const routes = [
    {
        path: '/',
        element: <Home />
    },
    {
        path: '/message',
        element: <Meaasge />
    },
    {
        path: '/info',
        element: <Info />
    },
    {
        path: 'recommand',
        element: <Recommand />
    },
    {
        path: '/user',
        element: <User />
    },
    {
        path: '/newhouse',
        element: <NewHouse />
    },
    {
        path: '/oldhouse',
        element: <OldHouse />
    },
    {
        path: '/renthouse',
        element: <RentHouse />
    },
    {
        path: '/cityprice',
        element: <CityPrice />
    },
    {
        path: '/map',
        element: <Map />
    },
    {
        path: '/housedetail',
        element: <Detail />
    },
    {
        path: '/addmyhouse',
        element: <AddHouse />
    },
    {
        path: '/search',
        element: <Search />
    },
    {
        path: '/setting',
        element: <Setting />
    },
    {
        path: '/userInfo',
        element: <UserInfo />
    },
    {
        path: '/userName',
        element: <Name />
    },
    {
        path: '/login',
        element: <Login />
    },
    {
        path:'/rim',
        element: <Rim />
    },
    {
        path:'/messagecontent',
        element:<MeaasgeContent />
    }

]



function RouterList() {
    let element = useRoutes(routes)  // 读取路由数组
    return element
}

function Router() {
    const location = useLocation();
    const navigate = useNavigate()
    useEffect(() => {
    //   console.log('路由变化',location.pathname);
      if (location.pathname != '/login') {
       const token = JSON.parse(localStorage.getItem('token')) 
       if (!token || !token?.phone) {
        navigate('/login')
       }
      }
    }, [location]);
    let style = {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: '300px'
    }
    return (
        // 加载菊花图
        <Suspense fallback={<Loading type="spinner" color="#3f45ff" style={style} />}>
            <RouterList />
        </Suspense>
    )
}

export default Router